<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>

    <h2>JavaScript HTML DOM</h2>

    <p>Hello World!</p>

    <p>Hello Runoob!</p>

    <p>点击按钮修改 p 元素的背景颜色。</p>

    <button onclick="myFunction()">点我</button>

    <script>
        /* 
        注意
            HTMLCollection 不是一个数组！

            HTMLCollection 看起来可能是一个数组，但其实不是。

            你可以像数组一样，使用索引来获取元素。

            HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。
        */
        function myFunction() {
            var myCollection = document.getElementsByTagName("p");
            var i;
            for (i = 0; i < myCollection.length; i++) {
                myCollection[i].style.color = "red";
                myCollection[i].style.background = "green";
            }
        }
    </script>

</body>

</html>